<template>
	<div >
		<div class="bg-weight info-view">
			<div class="item-view">		
				<p class="fs-18">账户金额</p>
				<p class="fs-16" style="margin-top:10px; color : orange;">{{balance}}</p>				
			</div>
			<div class="item-view">
				<p class="fs-18">冻结金额</p>
				<p class="fs-16" style="margin-top:10px; color : orange;">{{BlockedBalance}}</p>
			</div>
		</div>
		<div class="main-container">
			<div><p class="fs-18 pdtop-10-o">账户明细</p></div>
			<div style="margin-top:10px;"><p> </p></div>
			<div class="flex-row detail-search">
				<p class="fs-16" style="padding-left: 100px;padding-right: 15px;">明细状态</p>
				<el-dropdown @command="handleCommand">
					<el-button style="width: 150px;" >{{title}}<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command='0'>全部</el-dropdown-item>
						<el-dropdown-item command='1'>已充值</el-dropdown-item>
						<el-dropdown-item command='2'>已支付</el-dropdown-item>
						<el-dropdown-item command='3'>已退款</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button style="margin-left: 15px; background-color: orange; color: #FFF" icon="el-icon-search" @click="searchDetail"></el-button>
			</div>
			<!-- table -->
			<hr style="width: 98%;color: gainsboro; margin: 10px auto;">
			<div style="margin :20px">
				<el-table
					:data="tableData"
					border
					style="width: 100%"
					:header-cell-style="{
						'background-color': 'gainsboro',
						'font-size': '16px',
						'font-weight': 'bold',
						'color' : '#66667d'
					}">
					<el-table-column
						prop="orderId"
						label="订单号"
						width="200"
						>
					</el-table-column>
					<el-table-column
						prop="tradingMedia"
						label="交易媒体"
						width="200">
					</el-table-column>
					<el-table-column
						prop="tradingContent"
						label="交易内容"
						width="250">
					</el-table-column>
					<el-table-column
						prop="tradingMoney"
						label="交易金额"
						width="180">
					</el-table-column>
					<el-table-column
						prop="createTime"
						label="时间"
						width="250">
					</el-table-column>
					<el-table-column
						label="交易状态">
						<template slot-scope="scope">
							<span v-if="scope.row.tradingStatus == 1">已充值</span>
							<span v-if="scope.row.tradingStatus == 2">已支付</span>
							<span v-if="scope.row.tradingStatus == 3">已取消</span>
						</template>
						
					</el-table-column>
					
				</el-table>
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currPage"
				:page-sizes="[30, 50]"
				layout="prev, pager, next, jumper,total, sizes"
				:total="totalCount">
				</el-pagination>
			</div>
		</div>
	</div>
	
	

</template>

<script>
	export default {
		created() {
			this.showAccount();
		},
		data(){
			return {
				currPage : 1 ,
				totalCount : 0,
				pageSize: 30,
				balance : "10000.00",
				BlockedBalance : "7885645.00",
				status : "0",
				title : "全部",
				tableData : [{
					createTime : '',
					detailStatus : '',
					id : '',
					mid : '',
					orderId : '',
					tradingContent : '',
					tradingMedia : '',
					tradingMoney : '',
					tradingStatus : '',
					updateTime : ''
				}]
			}
		},
		methods:{
			handleSizeChange(val) {
				this.pageSize= val;
				this.showAccount();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currPage= val;
				this.showAccount();
			},
			showAccount(){
				this.$api.user.findCollectionAccountList().then(res=>{
					//console.log(res.data);
					this.balance = res.data.userBalance;
					this.BlockedBalance = res.data.userBlockedBalance;
				});
				this.$api.billInfo.getAllBillInfo({
					page : this.currPage,
					size : this.pageSize
				}).then(res=>{
					console.log(res.data);
					this.tableData = res.data.billinfos;
					this.totalCount = res.data.totalCount;
				});
				
			},
			// I don't know why he wrote two apis
			searchDetail(){
				this.$api.billInfo.findBillInfoByDetailStatus({
					page : this.currPage,
					size : this.pageSize,
					status : this.status
				}).then(res=>{
					console.log(res.data);
					this.tableData = res.data.billinfos;
					this.totalCount = res.data.totalCount;
				});
			},
			handleCommand(command){
				this.status = command;
				switch (command){
					case '0':
						this.title = "全部";
						break;
					case '1':
						this.title = "已充值";
						break;
					case '2':
						this.title = "已支付";
						break;
					default:
						this.title = "已退款";
						break;
				}
			}
		}
	}
</script>

<style>
.info-view {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	line-height: 20px;
	
}

.bg-weight {
	background-color: #FFFFFF;	
}

.main-container {
	margin-top:  20px;
	background-color: #FFFFFF;	
}

.item-view {
	width: 50%;
	margin: 20px !important;
	height: 160px;
	margin: auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 10px;
	border: 1px solid gainsboro;
}
.flex-row {
	display: flex;
	flex-direction: row;
}

.fs-18 {
	font-size: 18px;
	color: black;
}

.fs-16 {
	font-size: 16px;
	color: black;
}

.el-dropdown {
	vertical-align: top;
}
.el-dropdown + .el-dropdown {
	margin-left: 15px;
}
.el-icon-arrow-down {
	font-size: 12px;
}

/* 账户样式 */
.pdtop-10-o {
	padding-top: 20px;
	margin-left: 20px;
	padding-bottom: 5px;
	color: orange;
	border-bottom: 3px solid orange;
	width: fit-content;
	
	
}

/* 明细状态栏 */
.detail-search {
	display: flex;

	text-align: center;
	height: 40px;
	line-height: 40px;
}

</style>
